* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to right bottom , #d35400 30%,#f1c40f 70%);
	overflow: hidden;
}

#app {
	height: 700px;
	margin: 160px auto;
	max-width: 470px;
	width: 100%;
	background-color: white;
	border-radius: 5px; 
	position: relative; 
} 

#app h1 {
	text-align: center;
	color: white;
	letter-spacing: 4px;
	font-weight: bold;
	position: absolute;
	top: -100px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.top {
    display: flex;
}
.sk0 {
	background: url("../images/skin0.png") no-repeat;
}
.sk1 {
	background: url("../images/skin1.png") no-repeat;
}
.top .left {
    width: 300px;
    height: 300px; 
    background-size: contain;
	animation: JUMP 1s 4 backwards; 
}

.top .right {
    flex: 1; 
	padding: 10px;
}
.weight {
	line-height: 120px; 
}

#weight {
	font-size: 100px;
	font-weight: bold;
}
.btns {
	padding: 10px;
}
.console {
	padding: 10px; 
}
#list { 
	height: 280px;
	overflow: auto; 
}
@keyframes JUMP {
	50% {
		transform: translateY(-20px);
	} 
	100% {
		transform: translateY(0px);
	}
}